<template>
    <el-affix>
        <el-header height="auto">
            <div class="search">
                <div style="display:flex;justify-content: space-between;align-items: center">
                    <div style="display:flex;align-items: center">
                        <el-text style="margin-right: 1em"><h4>主题</h4></el-text>
                        <el-input v-model="searchForm.name"
                                  placeholder="搜索公告主题,按回车确认"
                                  class="searchName"
                                  :prefix-icon="Search"
                                  @keydown.enter="search"/>
                    </div>
                    <div style="display:flex;align-items: center">
                        <el-text style="margin-right: 1em"><h4>发布日期</h4></el-text>
                        <el-date-picker
                            v-model="searchForm.date" type="date"
                            placeholder="搜索发布日期之后的"
                            format="YYYY-MM-DD"
                            value-format="YYYY-MM-DD"
                            :disabled-date="disabledDate"
                            :shortcuts="shortcuts"
                            size="default"
                            @change="search"
                        />
                    </div>
                </div>
            </div>
        </el-header>
    </el-affix>
</template>

<script setup>
import {onMounted} from "vue";

import {Search} from "@element-plus/icons-vue";
import {getInformListBySearchApi} from "@/apis/search";

const props = defineProps(["currentPage", "pageSize", "total","searchForm"])
const emits = defineEmits(["update:currentPage", "update:pageSize", "update:total", "update:informList", "update:loading"])

const shortcuts = [
    {text: '今天', value: new Date()},
    {
        text: '昨天', value: () => {
            let date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            return date
        }
    },
    {
        text: '一周前', value: () => {
            let date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            return date
        }
    }]

//判断不能选中未来的日期
let disabledDate = time => {
    return time.getTime() > Date.now()
}
//搜索
const search = async () => {
    emits("update:loading", true)
    const res = await getInformListBySearchApi(props.currentPage, props.pageSize, props.searchForm)
    emits("update:total", res.data.totalElements)
    emits("update:informList", res.data.content)
    emits("update:loading", false)
}

onMounted(()=>search())
</script>

<style scoped lang="scss">

.el-header {
    padding: 1em 10%;
    background-color: white;
}

.searchName {
    width: 400px;
}

/*
    日期选择器
 */
.search {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    div {
        justify-content: space-between;
    }
}

</style>